
// 定义二维数组，存储正确的图片位置数据
let win = [
    [1,2,3,4],
    [5,6,7,8],
    [9,10,11,12],
    [13,14,15,0]
]
// 保存图片位置数组
let data = [];
// 保存当前空白位置的坐标
let row,col;
// 游戏步数
let step = 0;

// 开始游戏
document.querySelector(".start").addEventListener("click", function(){
    initGame(data)
    this.innerText = "重新开始"
})



// 初始化游戏
function initGame(data){
    // 初始化图片位置数据
    initData()
    // 渲染图片
    initImg(data)
}
initGame(win)
// 初始化随机图片位置数据
function initData(){
    const gameArr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    // 打乱数组顺序
    for(let i=0; i<gameArr.length; i++){
        let index = getRan(0, gameArr.length)
        let temp = gameArr[i]
        gameArr[i] = gameArr[index]
        gameArr[index] = temp
    }
    // console.log(gameArr)
    // 把打乱顺序的数组添加到data二维数组中
    for(let i=0; i<gameArr.length; i++){
        if(gameArr[i]==0){
            row = parseInt(i/4);
            col = i%4
        }
        if(!data[parseInt(i/4)]){
            // 二维数组不存在 则添加
            data[parseInt(i/4)] = [];
        }
        data[parseInt(i/4)][i%4] = gameArr[i];
    }

}

// 渲染图片
function initImg(data){

    let gameList = document.querySelector(".game-list")
    let allImg = "";
    for(let i=0;i<4;i++){
        for(let j=0;j<4;j++){
            let count = data[i][j]
            if(count==0){
                // 空白位置不需要渲染图片
                allImg += "<li></li>"
                continue
            }
            allImg += `
                <li>
                    <img src="./img/person/beauty01/${count}.png" alt="">
                </li>
            `
        }
    }
    gameList.innerHTML = allImg

    // 判断是否完成游戏
    let isOver = overGame()
    if(isOver){
        document.querySelector(".win").style.display = "block"
    }
}

// 随机数
function getRan(min,max){
    return Math.floor(Math.random()*(max-min))+min
}

window.addEventListener("keydown",(e)=>{
    // 游戏结束不能继续玩
    if(overGame()){return}
    // 上
    if(e.code == "ArrowUp"){
        // 空格 col不变 row++
        // 边界判断
        if(row == data.length-1){return}
        // 交换位置
        data[row][col] = data[row+1][col]
        data[row+1][col] = 0
        row++
        // 重新渲染
        initImg(data)
        step++
        
    }
    // 下
    else if(e.code == "ArrowDown"){
        // 空格 col 不变 row--
        if(row==0){return}
        data[row][col] = data[row-1][col]
        data[row-1][col] = 0
        row--
        // console.log(row)
        // 重新渲染
        initImg(data)
        step++
    }
    // 左
    else if (e.code == "ArrowLeft"){
        // 空格 row不变 col--
        if(col==data.length-1){return}
        data[row][col] = data[row][col+1]
        data[row][col+1] = 0
        col++
        initImg(data)
        step++
    }
    // 右
    else if(e.code == "ArrowRight"){
        //  空格 row不变 col--
        if(col==0){return}
        data[row][col] = data[row][col-1]
        data[row][col-1] = 0
        col--
        initImg(data)
        step++

    }

    // w 一键还原 
    else if(e.code == "KeyW"){
        data = win
        initImg(data)
    }
    // 更新步数
    updateStep()
})

// 判断是否完成
function overGame(){
    for(let i=0;i<4;i++){
        for(let j=0;j<4;j++){
            if(data[i][j] != win[i][j]){
                return false
            }
        }
    }
    return true
}


// 更新步数
function updateStep(){
    document.querySelector(".step").innerText = "步数："+step;
}

// 查看原图
let isLook = false
window.addEventListener("keypress",(e)=>{
    if(e.code == "KeyA"&&!isLook){
        isLook = true
        initImg(win)
    }
})
window.addEventListener("keyup", (e)=>{
    if(e.code == "KeyA"){
        initImg(data)
        isLook = false
    }
})